@use "./variables" as v;

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.subheading {
	font-family: "CommissionerVariable", sans-serif;

	line-height: 1.2;
	font-weight: 500;
	margin: 0.5em 0 1.38rem;
}

h1,
.h1 {
	font-size: 2.488rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

h2,
.h2 {
	font-size: 2.074rem;
	font-weight: 700;
}

h3,
.h3 {
	font-size: 1.728em;
}

h4,
.h4 {
	font-size: 1.44em;
}

h5,
.h5 {
	font-size: 1.2em;
}

h6,
.h6 {
	font-size: 1em;
}

p {
	margin: 0 0 v.$sm-spacing;
	font-size: 1em;
}

a.no-style {
	text-decoration: none;
	&:focus,
	&:focus-visible,
	&:focus-within {
		outline: none;
	}
}

a:not(.no-style),
.link:not(.no-style) {
	$link-color: rgb(245, 245, 245);
	color: rgb(245, 245, 245);

	text-decoration: none;
	transition: color 0.2s;
	display: inline;
	&.link {
		font-weight: 500;
	}
	&:active,
	&:focus,
	&:hover {
		-webkit-text-decoration: underline 0.001em solid;
		text-decoration: underline 0.001em solid;
		text-underline-offset: 0.001em;
		color: darken($link-color, 15%);
		outline: none;
	}
	&:hover {
		cursor: pointer;
	}
}

.explicit {
	text-shadow: none;
	/* max-height: 1em; */
	min-width: 1em;
	min-height: 1em;
	/* width: 1em; */
	position: relative;
	place-content: center;
	display: inline-flex;
	// contain: paint;
	font-size: 0.5em;
	text-rendering: optimizeLegibility;
	&::before {
		content: "E";
		position: absolute;

		z-index: 5;

		place-self: center;
		// inset:0;
		font-weight: 700;
		aspect-ratio: 1/1;
		line-height: 1.1;
	}
	font-size: calc(1em * 0.25  + 4px);
	padding: 0.0875rem;
	aspect-ratio: 1/1;
	background: #ffffffbf;
	border-radius: clamp(calc(calc(0.25em * 0.5) + .1px), 16px * .0125, 4px);
	vertical-align: middle;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue,
		sans-serif;

	color: rgb(8, 8, 8) !important;
}

a small {
	$color: rgb(175, 175, 175);
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-caps: all-petite-caps;
	letter-spacing: 0.05rem;
	transition: ease-in color 75ms;
	color: $color;
	&:hover {
		color: lighten($color, 30%);
		text-decoration: underline 0.001rem solid;
		text-underline-offset: 0.001rem;
	}
}

.secondary {
	color: rgba(255, 255, 255, 0.7) !important;
	font-weight: 400;
}
